<!-- 车辆列表 -->
<template>
  <div class="dashboard-container vehicle customer-list-box">
    <!-- 顶部搜索栏 -->
    <el-form
      ref="formListTruck"
      :inline="true"
      class="form-input"
      :model="inpData"
      :rules="rules"
    >
      <el-form-item
        label="车辆类型："
      >
        <el-select
          ref="truckType"
          v-model="formDataValue"
          clearable
          placeholder="请选择"
          style="width: 300px; min-width: 210px;"
        >
          <el-option
            v-for="item in formData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="车牌号码："
        prop="carCard"
      >
        <el-input
          v-model="inpData.carCard"
          clearable
          style="width: 310px;"
          placeholder="请输入车牌号码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="danger"
          class="bigButton"
          @click="searchTruck"
        >搜索</el-button>
        <el-button
          class="bigButton"
          @click="resetTruck"
        >重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 中间导航栏 -->
    <el-menu
      class="el-menu"
      mode="horizontal"
      :default-active="activeIndex"
      active-text-color="#e2766c"
      :background-color="menuBackgroundColor"
    >
      <el-menu-item
        index="1"
        @click="getTruckPageAll"
      >全部{{ +state[1] + +state[0] }}</el-menu-item>
      <el-menu-item
        index="2"
        @click="getAvailablePage"
      >可用{{ state[1] }}</el-menu-item>
      <el-menu-item
        index="3"
        @click="getdisablePage"
      >停用{{ state[0] }}</el-menu-item>
    </el-menu>
    <!-- 列表选项 -->
    <el-card class="el-card">
      <el-button
        type="danger"
        class="bigButton"
        @click="carShowDialog = true"
      >新增车辆</el-button>
      <el-table
        class="el-table"
        :data="tableData"
        stripe
      >
        <el-table-column
          label="序号"
          type="index"
          width="76"
        ></el-table-column>
        <el-table-column
          label="车牌号码"
          prop="licensePlate"
          width="159"
        ></el-table-column>
        <el-table-column
          label="车辆类型"
          prop="truckTypeName"
          width="156"
        ></el-table-column>
        <el-table-column
          label="司机数量"
          prop="driverNum"
          width="156"
        ></el-table-column>
        <el-table-column
          label="车辆状态"
          prop="status"
          width="156"
        >
          <template v-slot="{ row }">
            <span
              v-if="row.workStatus === 1 "
              style="display: flex; justify-content: start; align-items: center;"
            ><div style="border-radius: 50%; width: 6px;height: 6px; background-color: green; margin-right: 2px;"></div><div>可用</div></span>
            <span
              v-else-if="row.workStatus === 0 "
              style="display: flex; justify-content: start; align-items: center;"
            ><div style="border-radius: 50%; width: 6px;height: 6px; background-color: red; margin-right: 2px;"></div><div>停用</div></span>
            <span v-else>未知状态</span>
          </template>
        </el-table-column>
        <el-table-column
          label="GPS设备ID"
          prop="deviceGpsId"
          width="235"
        ></el-table-column>
        <el-table-column
          label="实载重量(T)"
          prop="allowableLoad"
          width="235"
        ></el-table-column>
        <el-table-column
          label="实载体积(方)"
          prop="allowableVolume"
          width="235"
        ></el-table-column>
        <el-table-column
          label="操作"
          width="220"
          class="operate"
        >
          <template v-slot="{ row }">
            <el-button
              type="text"
              class="smallButton"
              @click="getDetail(row.id)"
            >查看详情</el-button>
            <el-button
              v-if="row.workStatus === 0"
              type="text"
              class="smallButton"
              @click="initiate(row.id)"
            >启用</el-button>
            <el-button
              v-else
              type="text"
              style="color: red;"
              class="smallButton"
              @click="vehicleStop(row.id)"
            >停用</el-button>
            <el-button
              type="text"
              class="smallButton smallOnly"
              @click="ConfigureDriverId(row.id)"
            >配置司机</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row
        type="flex"
        justify="center"
      >
        <el-col :span="12">
          <el-pagination
            :current-page="truckPage.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="truckPage.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
            @current-change="CurrentChangePage"
            @size-change="sizeChangePage"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <!-- 新增弹层 -->
    <el-dialog
      title="新增车辆"
      :visible.sync="carShowDialog"
      width="600px"
    >
      <el-form
        ref="addForm"
        label-width="100px"
        :model="addDataForm"
        :rules="addRules"
      >
        <el-form-item
          label="车辆类型："
          prop="addDataValue"
        >
          <el-select
            v-model="addDataForm.addDataValue"
            placeholder="请选择"
          >
            <el-option
              v-for="item in addData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="车牌号码："
          prop="addCarCard"
        >
          <el-input
            v-model="addDataForm.addCarCard"
            placeholder="请输入车牌号码"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="GPS设备ID:"
          prop="GpsId"
        >
          <el-input
            v-model="addDataForm.GpsId"
            placeholder="请输入GPS设备ID"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-row
            type="flex"
            justify="center"
            style="padding: 15px 60px 40px 0;"
          >
            <el-col :span="10">
              <el-button
                type="danger"
                class="bigButton"
                @click="addOk"
              >确认</el-button>
              <el-button
                class="bigButton"
                @click="cancelOk"
              >取消</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 车辆配置 -->
    <el-dialog
      title="车辆配置"
      :visible.sync="configurationShow"
      width="30%"
    >

      <p style="text-align: left; color: black;">配置司机需要满足以下条件：</p>
      <el-row>
        <el-col :span="6">
          <span style="text-align: left; color: black;">①车辆信息已完善</span>
        </el-col>
        <el-col :span="18">
          <span style="color: black; ">②车辆无未完成运输任务</span>
        </el-col>
      </el-row>
      <span
        slot="footer"
        class="dialog-footer"
        style="display: block; margin-top: 20px; margin-bottom: 10px;"
      >
        <el-button
          size="small"
          class="bigButton"
          @click="configurationCancel"
        >取 消</el-button>
        <el-button
          type="danger"
          size="small"
          class="bigButton"
          @click="ConfigureDrivers"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 引入配置司机组件 -->
    <arrangeDriver
      ref="childRef"
      :title-info="titleInfo"
      :car-modal-info="carModalInfo"
      :drivers-list="driversList"
      :form-base-ad="formBaseAd"
    ></arrangeDriver>
    <!-- 启用弹层 -->
    <el-dialog
      title="车辆启用"
      :visible.sync="enableUser"
      width="30%"
      style="text-align: left;"
    >
      <p style="color: black; text-align: left;">确定要启用吗？ 车辆启用需要满足以下条件：</p>
      <span style="padding-right: 150px; margin-left: -120px; color: black;">①车辆信息已完善</span>
      <span style="color: black;">②绑定司机>=2,且有排班</span>
      <el-row
        type="flex"
        justify="end"
      >
        <el-col :span="6">
          <el-button
            size="small"
            style="margin: 30px 0;"
            class="bigButton"
            @click="initiateCancel"
          >取消</el-button>
          <el-button
            size="small"
            type="danger"
            class="bigButton"
            @click="initiateOk"
          >确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 停用弹层 -->
    <el-dialog
      title="车辆停用"
      :visible.sync="stopUser"
      width="30%"
      style="text-align: left;"
    >
      <p style="color: black; text-align: left;">确定要停用吗？ 车辆停用需要满足以下条件：</p>
      <span style="padding-right: 150px; margin-left: -120px; color: black;">①车辆当前无运输任务</span>
      <span style="color: black;">车辆无关联运输线路</span>
      <p style="text-align: left; color: #ffc43d;">注：停用后司机将自动解除绑定</p>
      <el-row
        type="flex"
        justify="end"
      >
        <el-col :span="6">
          <el-button
            size="small"
            style="margin: 30px 0;"
            class="bigButton"
            @click="initiateCancel"
          >取消</el-button>
          <el-button
            size="small"
            type="danger"
            class="bigButton"
            @click="vehicleStopOk"
          >确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>

import { getTruckPage, getCarType, getCount, addCar, getCarDetail, getInitiate, getVehicleStop, unBindDriverList } from '@/api/transit'
import arrangeDriver from './components/arrange-driver.vue'
export default {
  name: 'Vehicle',
  components: {
    arrangeDriver
  },
  data() {
    return {
      sonCarDriver: [],
      menuBackgroundColor: '#fff', // 菜单背景颜色
      // 搜索框菜单
      formData: [
        {
          id: '',
          name: ''
        }
      ],
      // 新增框菜单
      addData: [
        {
          id: '1575066321985286145',
          name: '4.2米箱式货车'
        }
      ],
      formDataValue: '', // 搜索框值
      activeIndex: '1', // 默认选择第一个
      // 列表数据
      tableData: [{
        id: '1',
        licensePlate: '吉A12345',
        truckTypeName: '4.2米货车',
        driverNum: 2,
        workStatus: 0,
        deviceGpsId: '12398',
        allowableLoad: '20',
        allowableVolume: '20'
      }],
      // 请页码
      truckPage: {
        page: 1,
        pageSize: 10,
        licensePlate: '',
        truckTypeId: '',
        workStatus: null
      },
      // 总数
      counts: 0,
      // 输入框数据
      inpData: {
        carCard: ''
      },
      rules: {
        carCard: [
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              const reg = /^(?!.*(.).*\1)[\u4e00-\u9fa5\dA-Z]{1,8}$/
              if (reg.test(value)) {
                callback()
              } else {
                callback(new Error('请输入正确的车牌'))
              }
            }
          }
        ]
      },
      state: { // 状态
        0: '',
        1: ''
      },
      carShowDialog: false, // 新增框隐藏
      // 新增车辆列表
      addDataForm: {
        addCarCard: '',
        GpsId: '',
        addDataValue: '' // 新增框值
      },
      // 新增车辆规则
      addRules: {
        addCarCard: [
          { required: true, message: '请添加车牌号码', trigger: 'blur' },
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              const reg = /^[\u4e00-\u9fa5][A-Z][0-9A-Z]{5}$/
              if (reg.test(value)) {
                callback()
              } else {
                callback(new Error('请输入正确的车牌号'))
              }
            }
          }
        ],
        GpsId: [
          { required: true, message: '请输入GPS设备ID', trigger: 'blur' }
        ],
        addDataValue: [
          { required: true, message: '请输入车辆类型', trigger: 'blur' }
        ]
      },
      // 车辆配置
      configurationShow: false,
      titleInfo: { text: '配置司机' }, // 配置司机标题
      formBaseAd: {},
      carModalInfo: { }, // 车辆基本信息
      driversList: [], // 司机列表
      ConfigureId: '',
      enableUser: false, // 启用按钮
      stopUser: false // 停用按钮
    }
  },
  created() {
    this.getTruckPage()
    this.getCount()
    this.getCarType()
  },
  methods: {
    // 获取分页数据
    async getTruckPage() {
      const res = await getTruckPage(this.truckPage)
      this.counts = +res.data.counts
      this.tableData = res.data.items
    },
    // 获取车辆类型列表
    async getCarType() {
      const res = await getCarType()
      this.formData = res.data
      this.addData = res.data
    },
    // 页码改变事件
    async CurrentChangePage(val) {
      this.truckPage.page = val
      const res = await getTruckPage(this.truckPage)
      this.tableData = res.data.items
    },
    // 页面条数改变
    async sizeChangePage(val) {
      this.truckPage.pageSize = val
      const res = await getTruckPage(this.truckPage)
      this.tableData = res.data.items
    },
    // 搜索查询
    async searchTruck() {
      this.truckPage.licensePlate = this.$refs.formListTruck._props.model.carCard
      this.truckPage.truckTypeId = this.$refs.truckType.value
      this.truckPage.page = 1
      const res = await getTruckPage(this.truckPage)
      this.counts = +res.data.counts
      this.tableData = res.data.items
    },
    // 重置表单
    async resetTruck() {
      this.$refs.formListTruck.resetFields()
      this.truckPage.truckTypeId = ''
      this.truckPage.licensePlate = ''
      const res = await getTruckPage(this.truckPage)
      this.tableData = res.data.items
      this.counts = +res.data.counts
      this.formDataValue = ''
    },
    // 统计车辆
    async getCount() {
      const { data } = await getCount()
      this.state = data
    },
    // 全部列表
    async getTruckPageAll() {
      this.truckPage.truckTypeId = ''
      this.truckPage.licensePlate = ''
      this.truckPage.workStatus = null
      const value = await this.getTruckPage()
      this.tableData = value.data.items
    },
    // 可用列表
    async getAvailablePage() {
      this.truckPage.truckTypeId = this.formData.id
      this.truckPage.licensePlate = this.inpData.carCard
      this.truckPage.workStatus = 1
      const res = await this.getTruckPage()
      this.tableData = res.data.items
    },
    // 停用列表
    async getdisablePage() {
      this.truckPage.truckTypeId = this.formData.id
      this.truckPage.licensePlate = this.inpData.carCard
      this.truckPage.workStatus = 0
      const res = await this.getTruckPage()
      this.tableData = res.data.items
    },
    // 确认添加车辆
    addOk() {
      this.$refs.addForm.validate(async isOk => {
        if (isOk) {
          await addCar({ licensePlate: this.addDataForm.addCarCard, deviceGpsId: this.addDataForm.GpsId, truckTypeId: this.addDataForm.addDataValue })
          this.$message.success('添加车辆成功')
          this.getTruckPage()
          this.cancelOk()
        }
      })
    },
    // 取消添加
    cancelOk() {
      this.carShowDialog = false
      this.$refs.addForm.resetFields()
    },
    // 查看详情
    getDetail(id) {
      this.$router.push(`vehicle-detail/?id=${id}&formUrlName=车辆管理`)
    },
    // 配置司机按钮
    async ConfigureDriverId(id) {
      this.ConfigureId = id
      const res = await getCarDetail(id)
      this.carModalInfo = res.data
      this.configurationShow = true
    },
    // 配置司机取消
    configurationCancel() {
      this.configurationShow = false
      this.$message('已取消')
    },
    // 确定配置司机
    async ConfigureDrivers() {
      this.configurationShow = false
      this.$refs.childRef.dialogFormV()
      const value = await unBindDriverList()
      this.driversList = value.data
      const val = await getCarDetail(this.ConfigureId)
      this.carModalInfo = val.data
    },
    // 取消启动
    initiateCancel() {
      this.enableUser = false
      this.stopUser = false
      this.$message('已取消')
    },
    // 车辆启用
    initiate(id) {
      this.enableUser = true
      this.ConfigureId = id
    },
    // 确定启用
    async initiateOk() {
      const res = await getInitiate(this.ConfigureId)
      if (res.code === 200) {
        this.$message.success('恭喜你，车辆启用成功！')
        setTimeout(() => {
          this.$router.go(0)
        }, 3000)
      } else {
        this.$message.error(res.msg)
      }
      this.enableUser = false
      this.getTruckPage()
      // this.$router.push('vehicle')
    },
    // 车辆停用
    vehicleStop(id) {
      this.stopUser = true
      this.ConfigureId = id
    },
    // 确定停用
    async vehicleStopOk() {
      const res = await getVehicleStop(this.ConfigureId)
      if (res.code === 200) {
        this.$message.success('车辆停用成功！司机以解除绑定')
        setTimeout(() => {
          this.$router.go(0)
        }, 3000)
      } else {
        this.$message.error(res.msg)
      }
      this.stopUser = false
      this.getTruckPage()
      // this.$router.push('vehicle')
    }
  }

}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
.vehicle ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

.vehicle {
  ::v-deep .el-dialog__title {
    width: 73px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20232a;
    line-height: 25px;
    letter-spacing: 0px;
  }
  ::v-deep .el-dialog__body {
    text-align: center;
    padding: 20px 20px 0px 20px;
  }
  .warn-img {
    width: 40px;
  }
  p {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #818693;
    line-height: 24px;
  }
  .form-input {
    margin-top: 20px;
    padding-top: 20px;
    padding-right: 50px;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 5px;
    background-color: #fff;
    display: flex;
    justify-content: start;
    // min-width: 1650px;
    ::v-deep .el-form-item {
      padding: 0 30px;
    }
    ::v-deep .el-button {
      padding: 12px 30px;
    }
  }
  .el-menu--horizontal .el-menu-item.is-active ,
  .el-menu--vertical .el-menu-item.is-active {
    background-color: #ffeeeb !important; // 设置选中菜单项的背景颜色
  }
  .el-menu {
    margin-top: 20px;
    margin-right: 20px;
    border-radius: 5px;
    margin-left: 20px;
    background-color: #fff;
  }
  .el-card {
    margin-top: 20px;
    margin-right: 20px;
    border-radius: 5px;
    margin-left: 20px;
    .el-table {
      margin-top: 20px;
    }
    .el-pagination {
      margin-top: 20px;
    }
  }
}

// 下拉框
::v-deep .el-select {
  width: 100%;
}
</style>

<style>
  .startconfirm{
    width: 481px;

    }
    .startconfirm .el-message-box__header{
      padding-bottom: 4px;
    }
    .startconfirm .el-message-box__container{
      margin-bottom: 15px;
    }
    .confirm .el-message-box__status.el-icon-warning{
      left: 70px;
    }
    .confirm.el-message-box__title{
      font-size: 16px;
    }
    .confirm .el-message-box__message p {
      color: #F92D2D;
      margin-top: 5px;
    }
    .confirm .el-message-box__btns{
      text-align: center;
      margin-top: 10px;
    }
    .vehicle {padding-bottom: 50px;}
    .bigButton:hover {
      background-color: #ffeeeb;
      color: #e15536;
      border: #ffeeeb;
    }
    .el-menu-item:hover {
      background-color: transparent !important;
    }
    .el-menu-item {
      border-bottom-color: transparent !important
    }
    .smallButton {
      border-right: 1px solid #dcdfe6;
      padding: 0;
      padding-right: 8px;
      border-radius: 0;
    }
    .smallOnly {
      border-right: none;
    }
</style>
